<template>
		
		<view class="contract-item-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false"	>
			
				<template #top>
					<view class="" style="background-color: #fff;">
						<fui-nav-bar title="价格模板" background="#fff" isFixed isOccupy  @leftClick="pageBack">
						</fui-nav-bar>
						<view class="shop-header">
							<view class="u-p-20">
								<fui-search-bar isLeft searchText v-model="searchValue" placeholder="商品名称" :cancel="false"  background="#fff" inputBackground="#f0f0f0" paddingTb="0" paddingLr="0" radius="45"></fui-search-bar>
							</view>
						</view>
					</view>
				</template>
				<view class="history-container u-p-l-35 u-p-r-35">
					<view class="" v-for="(item, index) in dataList" :key="item.id" >
						<view class="history-item u-p-t-30 u-p-b-30  u-flex ">
							<view class="iconfont icon-jianshao" style="margin-right: 20rpx;color: #FF551A;" @click="delItemBtnClick(item.id)" v-if="!isCheckShow" ></view>
							<image :src="item.itemResourceUrl" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
							<view class="" style="flex: 1;overflow: hidden;">
								<view class="u-font-30 u-line-1" style="font-weight: 500;">{{item.name}}</view>
								<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
									{{item.specification}}
								</view>
							</view>
							<view class="" style="width: 200rpx;">
							<!-- 	<view class="u-text-right u-line-1" style="color:#999 ;" v-if="item.isInheritFromBrandOwner">
									{{item.brandOwnerName}}
								</view> -->
								<view class="u-text-right" >
									<view class=" u-font-32" style="color: #ff551a;" v-if="isCheckShow">
										￥{{item.price}}
									</view>
									<view  v-if="!isCheckShow">
										<!-- <view class="u-font-32" style="color: #ff551a;" v-if="item.isInheritFromBrandOwner">
											￥{{item.price}}
										</view> -->
										<view class="u-flex u-row-right" style="color: #333;" >
											￥<input type="number" v-model="item.price" name="" id="" style="border: 1px solid #999;border-radius: 10rpx; text-align: center;width: 150rpx;height: 50rpx;">
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<template #bottom>
					
				<view>
					<view class="u-flex bottom-menu-container" v-if="isCheckShow" >
						<view class="u-flex u-p-40 bottom-menu" @click="itemMangeFn" >
							<image src="/static/xiaoshou/priceManger.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
							<view class="u-m-t-20 u-font-24" style="font-weight: bold;">管理商品</view>
						</view>
						<view class="u-flex u-p-40 bottom-menu" style="border-right: none;" @click="$mRouter.push({ route: '/pages/sale/priceTemplate/priceAddItem?templateId='+templateId+'&templateName='+templateName })">
							<image src="/static/xiaoshou/tianjiashangpin.png" mode="" style="width: 48rpx;height: 48rpx;" ></image>
							<view class="u-m-t-20 u-font-24" style="font-weight: bold;">添加商品</view>
						</view>
					</view>
					<view v-else>
						<!-- bottom的内容 -->
						<view class="history-bottom u-p-r-35 u-p-l-35 u-flex u-col-center u-row-between">
							<button type="default" class="history-del_btn" style="border: 1px solid #333; background-color: #fff;" @click="isCheckShow = true">取消</button>
							<button type="default" class="history-del_btn" @click="updateItemPrice">保存</button>
						</view>
					</view>
				</view>
				</template>
			</z-paging>
			<fui-modal :show="delModel" :descr="'您确定要从模板中移除此商品？'"  @confirm="delContractItem()" maskClosable @cancel="delModel=false"></fui-modal>
		</view>
	
</template>

<script>
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				isCheckShow:true,
				allSelect:false,
				createTemplate:false,
				delModel:false,
				delItemId:'',
				salesAgreementId:'',
				templateId:"",
				searchValue:'',
				templateName:'',
				chooseTemplateId:'',
				exportMethod:1,
				refreshIfNeeded:false,
			}
		},
		onLoad(options) {
			this.templateName = options.name;
			this.templateId = options.templateId;
		},
		onShow() {
			uni.$off('sendPriceTemplate')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('sendPriceTemplate',function(data){
				that.reloadFn();
			})
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage._data.refreshIfNeeded) {
				currentPage._data.refreshIfNeeded = false;
				//这里为要调用的函数，重新获取数据，记得加上this
				// this.itemListInit();
			}
		},
		methods: {
			// 删除商品icon 点击时发生
			delItemBtnClick(id){
				this.delModel = true;
				this.delItemId = id;
			},
			// 确认删除商品
			async delContractItem(){
				const res = await this.$newHttp.delete('api/Shop/v2/RemovePriceTemplateItems?id='+this.templateId+'&priceTemplateItemIds='+this.delItemId);
				console.log(res);
				if(res.code === 200){
					let index = this.dataList.findIndex(item=>{
						return item.id === this.delItemId
					});
					this.dataList.splice(index,1);
				}else{
					uni.$fui.toast('删除商品失败')
				}
			},
			// 点击管理商品
			itemMangeFn(){
				this.isCheckShow = false;
			},
			reloadFn(){
				this.$refs.paging.reload();
			},
			// 全选
			checkedAll(e) {
				this.dataList.map(val => {
					val.checked = e.value;
				});
			},
			async updateItemPrice(){
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				let ary = [];
				this.dataList.forEach(item=>{
					ary.push({
						id:item.id,
						itemId:item.itemId,
						price:item.price
					});
				});
				console.log(ary);
				if(ary.length == 0){
					uni.hideLoading({});
					uni.$fui.toast('没有能修改的价格');
					return false;
				};
				let allNoZero = ary.every(item=>{return item.price!==''&&item.price>0});
				if(!allNoZero){
					uni.hideLoading({});
					uni.$fui.toast('商品价格不得有空项，或者小于0');
					return false;
				}
				let params = {
					items:ary,
					id:this.templateId
				}
				const res = await this.$newHttp.post('api/Shop/v2/SavePriceTemplateItems',params);
				uni.hideLoading({});
				if(res.code == 200){
					this.isCheckShow = true;
					this.$refs.paging.reload();
				}else{
					uni.$fui.toast('保存失败，错误信息：'+res.erroMessage);
				}
				
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					IsPaging:true,
					templateId:this.templateId
				}
					
				if(this.searchValue != ''){
					params.name = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Shop/v2/getPriceTemplateItems', { params: params } );
				uni.hideLoading({})
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						return item
					});
					this.$refs.paging.complete(ary);
				}else{
					this.$refs.paging.complete(false);
				}
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css'; 
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.contract-item-content {
		height: 100%;
		.shop-header{
			background: #fff;
			overflow: hidden;
			// margin-bottom: 20rpx;
			.shop-logo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 48rpx auto 30rpx;
				display:block;
			}
			.shop-name{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
		}
		.bottom-menu-container{
			background-color: #fff;
			.bottom-menu{
				flex:1;border: 1px solid #eaeaee;flex-direction: column;align-items: center;justify-content: center;
			}
		}
	}
	.history-container{
		box-sizing: border-box;
	
		
		background-color: #fff;
		.history-item{
			width: 100%;
			background-color: #fff;
			// border-radius: 10rpx;
			border-bottom: 1px solid #eaeaea;
		}
		
	}
	.history-bottom{
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		.history-del_btn{
			width: 44%;
			height: 80rpx;
			background: #FFBB1A;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0;
		}
	}
	
</style>
